<template>
  <div class="DetailsBasicInformation">
    <Form :label-width="170">
      <Row :gutter="16">
        <!-- 基本信息 -->
        <div class="label_title" v-if="baseInfoVos.length > 0">基本信息</div>
        <div class="clearfix">
          <div v-for="(item, index) in baseInfoVos" :key="index" class="div_style">
            <Col
              v-if="
                item.dbKey != 'customer_name' &&
                item.dbKey != 'customer_phone' &&
                item.dbKey != 'status' &&
                item.dbKey != 'customer_feature' &&
                item.dbKey != 'accessory_images' &&
                item.dbKey != 'feature_photo' &&
                item.dbKey != 'wechat_photo' &&
                item.dbKey != 'self_customer_evidence'
              ">
              <FormItem :label="item.fieldValue + '：'">
                <span>
                  {{ item.fieldResValue || '-' }}
                  <em
                    class="ClueChannel"
                    @click="moreClueChannel"
                    v-if="item.dbKey == 'clue_source_channel' && moreChannelFlag">
                    查看渠道详情
                  </em>
                  <em
                    class="ClueChannel"
                    @click="onEditChannel"
                    v-if="item.dbKey == 'channel_source' && unlocking('0101010800') && !big">
                    修改
                  </em>
                </span>
              </FormItem>
            </Col>
            <Col v-else-if="item.dbKey == 'self_customer_evidence'">
              <FormItem :label="item.fieldValue + '：'">
                <div class="listImg">
                  <div v-for="(imgItem, index) in item.fieldResValue" :key="index">
                    <div v-if="imgItem.url" class="demo-upload-list">
                      <img :src="imgItem.url" />
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click="handleView(index, item.fieldResValue)"></Icon>
                      </div>
                    </div>
                    <span v-else>-</span>
                  </div>
                </div>
              </FormItem>
            </Col>
            <Col v-else-if="item.dbKey == 'accessory_images'">
              <FormItem :label="item.fieldValue + '：'">
                <div class="listImg">
                  <div v-for="(imgItem, index) in item.fieldResValue" :key="index">
                    <div v-if="imgItem.url" class="demo-upload-list">
                      <img :src="imgItem.url" />
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click="handleView(index, item.fieldResValue)"></Icon>
                      </div>
                    </div>
                    <span v-else>-</span>
                  </div>
                </div>
              </FormItem>
            </Col>

            <Col v-else-if="item.dbKey == 'wechat_photo'">
              <FormItem :label="item.fieldValue + '：'">
                <div class="listImg">
                  <div v-for="(imgItem, index) in item.fieldResValue" :key="index">
                    <div v-if="imgItem.url" class="demo-upload-list">
                      <!-- {{ item.fieldResValue }} -->
                      <img :src="imgItem.url" />
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click="handleView(index, item.fieldResValue)"></Icon>
                      </div>
                    </div>
                    <span v-else>-</span>
                  </div>
                </div>
              </FormItem>
            </Col>
            <!-- <Col v-else-if="item.dbKey == 'self_customer_evidence'">
              <FormItem :label="item.fieldValue + '：'">
                <div class="listImg">
                  <div v-for="(imgItem, index) in item.fieldResValue" :key="index">
                    <div v-if="imgItem.url" class="demo-upload-list">
                      <img :src="imgItem.url" />
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click="handleView(index, item.fieldResValue)"></Icon>
                      </div>
                    </div>
                    <span v-else>-</span>
                  </div>
                </div>
              </FormItem>
            </Col> -->

            <!-- <Col v-else-if="item.dbKey == 'channel_source'&&culeFlag!='clue'">
            <FormItem :label="item.fieldValue + '：'">
              <span>{{ item.fieldResValue || "-" }}</span>
            </FormItem>
            </Col> -->
          </div>
        </div>
        <!-- 置业需求 -->
        <div class="label_title" v-if="buyDemandVos.length > 0">置业需求</div>
        <div class="clearfix">
          <div v-for="item in buyDemandVos" :key="item.dbKey" class="div_style">
            <Col>
              <FormItem :label="item.fieldValue + '：'">
                <span>{{ item.fieldResValue || '-' }}</span>
              </FormItem>
            </Col>
          </div>
        </div>
        <!-- 客户画像 -->
        <div class="label_title" v-if="customerInfoVos.length > 0">客户画像</div>
        <div class="clearfix">
          <div v-for="item in customerInfoVos" :key="item.dbKey" class="div_style">
            <Col>
              <FormItem :label="item.fieldValue + '：'">
                <span>{{ item.fieldResValue || '-' }}</span>
              </FormItem>
            </Col>
          </div>
        </div>
        <!-- 服务信息 -->
        <div class="label_title" v-if="serviceInfoVos.length > 0">服务信息</div>
        <div class="clearfix">
          <div v-for="item in serviceInfoVos" :key="item.dbKey" class="div_style">
            <Col v-if="item.dbKey == 'attention_factor'">
              <FormItem label="关注因素：">
                <span>{{ item.fieldResValue || '-' }}</span>
              </FormItem>
            </Col>
            <Col v-else-if="item.dbKey == 'resistance_points'">
              <FormItem label="抗性因素：">
                <span>{{ item.fieldResValue || '-' }}</span>
              </FormItem>
            </Col>
            <Col v-else>
              <FormItem :label="item.fieldValue + '：'">
                <span>{{ item.fieldResValue || '-' }}</span>
              </FormItem>
            </Col>
          </div>
        </div>
      </Row>
    </Form>
    <preview-image
      :images="preViewImg"
      :showIndex="showIndex"
      :showDownLoad="true"
      ref="preViewImage"></preview-image>
  </div>
</template>

<script>
  export default {
    props: {
      culeFlag: {
        type: String,
        default: ''
      },
      big: {
        type: Boolean,
        default: false
      },
      basicInformatData: {
        type: Object,
        default: () => {
          return {}
        }
      },
      comNames: {
        type: String,
        default: ''
      },
      standingBookGetGroup: {
        type: Object,
        default: () => {
          return []
        }
      }
    },

    data() {
      return {
        preViewImg: [],
        showIndex: 0,
        previewAddress: '',
        imageVisible: false,
        baseInfoVos: [],
        buyDemandVos: [],
        customerInfoVos: [],
        serviceInfoVos: [],
        moreChannelFlag: false,
        fieldDel: [
          'accessory_images',
          'channel_source',
          'status',
          'last_visit_time',
          'check_in_method',
          'visit_count',
          'standby_phone'
        ]
      }
    },
    watch: {
      basicInformatData(val) {
        this.basicInformatData = val
        if (
          this.basicInformatData.clueSourceChannel &&
          JSON.parse(this.basicInformatData.clueSourceChannel).length > 1
        ) {
          this.moreChannelFlag = true
        } else {
          this.moreChannelFlag = false
        }
        this.initData()
      },
      standingBookGetGroup(val) {
        this.standingBookGetGroup = val
        this.initData()
      }
    },
    methods: {
      moreClueChannel() {
        this.$emit('clueChannelDetails')
      },
      handleView(index, imgList) {
        this.preViewImg = imgList.map((item) => item.url)
        this.showIndex = index
        this.$refs.preViewImage.show()
      },
      // 初始化获取数据
      initData() {
        this.baseInfoVos = []
        this.buyDemandVos = []
        this.customerInfoVos = []
        this.serviceInfoVos = []
        let arrChannel = []
        let arrSelfCustomerEvidence = []
        if (this.comNames == 'BasicInformation') {
          // 基本信息
          let arr = []
          this.standingBookGetGroup.baseInfoVos.forEach((item) => {
            if (item.infoType == 1 && item.validate == 1) {
              if (item.dbKey == 'channel_source') {
                item.fieldResValue = this.basicInformatData['channelSourceName']
                this.baseInfoVos.push(item)
              } else if (item.dbKey == 'accessory_images') {
                item.fieldResValue =
                  this.basicInformatData['accessoryImages'] && this.basicInformatData['accessoryImages'] != ''
                    ? JSON.parse(this.basicInformatData['accessoryImages'])
                    : []

                this.baseInfoVos.push(item)
              } else if (item.dbKey == 'wechat_photo') {
                item.fieldResValue =
                  this.basicInformatData['wechatPhoto'] && this.basicInformatData['wechatPhoto'] != ''
                    ? [
                        {
                          url: this.basicInformatData['wechatPhoto']
                        }
                      ]
                    : []
                this.baseInfoVos.push(item)
              } else if (item.dbKey == 'clue_source_channel') {
                this.basicInformatData['clueSourceChannel'] &&
                  JSON.parse(this.basicInformatData['clueSourceChannel']).forEach((element) => {
                    arrChannel.push(element.channelName)
                  })
                if (arrChannel.length > 1) {
                  this.moreChannelFlag = true
                } else {
                  this.moreChannelFlag = false
                }
                item.fieldResValue = arrChannel.join('、')
                this.baseInfoVos.push(item)
              } else if (item.dbKey == 'self_customer_evidence') {
                this.basicInformatData['selfCustomerEvidence'] &&
                  this.basicInformatData['selfCustomerEvidence'].split(',').forEach((element) => {
                    arrSelfCustomerEvidence.push({ url: element })
                  })
                item.fieldResValue = arrSelfCustomerEvidence
                this.baseInfoVos.push(item)
              } else {
                item.fieldResValue = this.basicInformatData[item.fieldKey]
                arr.push(item)
              }
            }
          })

          this.baseInfoVos = arr.concat(this.baseInfoVos)
          // 调整排序
          let wechatPhoIndex = this.baseInfoVos.findIndex((item) => {
            return item.fieldKey == 'wechatPhoto'
          })
          let wechatIndex = this.baseInfoVos.findIndex((item) => {
            return item.fieldKey == 'wechat'
          })
          let wechatPho = this.baseInfoVos.splice(wechatPhoIndex, 1)
          this.baseInfoVos.splice(wechatIndex + 1, 0, ...wechatPho)
          let channelSourceIndex = this.baseInfoVos.findIndex((item) => {
            return item.fieldKey == 'channelSource'
          })
          let channelSource = this.baseInfoVos.splice(channelSourceIndex, 1)
          this.baseInfoVos.splice(wechatIndex + 2, 0, ...channelSource)

          let accessoryImagesIndex = this.baseInfoVos.findIndex((item) => {
            return item.fieldKey == 'accessoryImages'
          })
          let accessoryImages = this.baseInfoVos.splice(accessoryImagesIndex, 1)
          this.baseInfoVos.splice(wechatIndex + 3, 0, ...accessoryImages)
          // 调整排序

          if (this.culeFlag != 'clue') {
            let _serIndex2 = this.baseInfoVos.findIndex((item) => {
              return item.dbKey == 'clue_source_channel'
            })
            if (_serIndex2 != '-1') {
              this.baseInfoVos.splice(_serIndex2, 1)
            }
          }
          if (this.culeFlag == 'clue') {
            this.baseInfoVos = this.baseInfoVos.filter((item) => {
              if (this.fieldDel.indexOf(item.dbKey) == -1) {
                return item
              }
            })
            let clueSourceChannelIndex = this.baseInfoVos.findIndex((item) => {
              return item.fieldKey == 'clueSourceChannel'
            })
            let clueSourceChannel = this.baseInfoVos.splice(clueSourceChannelIndex, 1)

            let marketingToolIndex = this.baseInfoVos.findIndex((item) => {
              return item.fieldKey == 'marketingTool'
            })
            this.baseInfoVos.splice(marketingToolIndex, 0, ...clueSourceChannel)
          }
        } else if (this.comNames == 'HomeDemand') {
          // 置业需求
          this.standingBookGetGroup.buyDemandVos.forEach((item) => {
            if (item.infoType == 3 && item.validate == 1) {
              item.fieldResValue = this.basicInformatData[item.fieldKey]
            }
          })
          this.buyDemandVos = this.standingBookGetGroup.buyDemandVos
        } else if (this.comNames == 'ServiceInformation') {
          // 服务信息
          this.standingBookGetGroup.serviceInfoVos.forEach((item) => {
            if (item.infoType == 2 && item.validate == 1) {
              item.fieldResValue = this.basicInformatData[item.fieldKey]
            }
          })
          this.serviceInfoVos = this.standingBookGetGroup.serviceInfoVos
          if (this.culeFlag == 'clue') {
            this.serviceInfoVos = this.serviceInfoVos.filter((item) => {
              if (this.fieldDel.indexOf(item.dbKey) == -1) {
                return item
              }
            })
            let _serIndex = this.serviceInfoVos.findIndex((item) => {
              return item.dbKey == 'overdue_date'
            })
            if (_serIndex != '-1') {
              this.serviceInfoVos.splice(_serIndex, 1)
            }
          } else {
            let _serIndex = this.serviceInfoVos.findIndex((item) => {
              return item.dbKey == 'first_contact_date'
            })
            if (_serIndex != '-1') {
              this.serviceInfoVos.splice(_serIndex, 1)
            }
            let _serIndex1 = this.serviceInfoVos.findIndex((item) => {
              return item.dbKey == 'is_effective'
            })
            if (_serIndex1 != '-1') {
              this.serviceInfoVos.splice(_serIndex1, 1)
            }
          }
        } else if (this.comNames == 'CustomerPortrait') {
          // 客户画像
          this.standingBookGetGroup.customerInfoVos.forEach((item) => {
            if (item.infoType == 4 && item.validate == 1) {
              item.fieldResValue = this.basicInformatData[item.fieldKey]
            }
          })
          this.customerInfoVos = this.standingBookGetGroup.customerInfoVos
        }
      },
      onEditChannel() {
        this.$emit('editChannel')
      }
    },
    created() {
      if (
        this.basicInformatData.clueSourceChannel &&
        JSON.parse(this.basicInformatData.clueSourceChannel).length > 0
      ) {
        this.moreChannelFlag = true
      } else {
        this.moreChannelFlag = false
      }
      this.initData()
    }
  }
</script>
<style lang="scss" scoped>
  .DetailsBasicInformation {
    .ivu-row {
      position: relative;
      margin-left: 0;
      margin-right: 0;
      height: auto;
      zoom: 1;
      display: block;
    }

    .ivu-row:after,
    .ivu-row:before {
      content: '';
      display: table;
    }

    .div_style {
      float: left;
      min-width: 50%;
    }

    .label_title {
      color: #194fe8;
      font-size: 20px;
    }

    .ivu-form-item {
      margin-bottom: 4px;
    }

    .editFeatures {
      vertical-align: middle;
      margin-left: 20px;
      cursor: pointer;
      display: inline-block;
    }
  }

  .customerVisitModel {
    p {
      margin-bottom: 10px;
    }

    .footer {
      padding-top: 20px;
      text-align: center;

      button {
        width: 120px;
        margin: 0 10px;
      }
    }
  }

  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .listImg {
    display: flex;
    flex-direction: row;
  }

  .ClueChannel {
    color: #194fe8;
    font-style: normal;
    cursor: pointer;
  }
</style>
